<template>
	<div class='wy-main matching-tendering'>
		<a-row class="wy-main-title" v-if='!datail'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">发布物流招标信息</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<div class="list_tab">
			<a-form :form="form" @submit="handleSubmit" class="wy-form">
				<a-form-item v-bind="formItemLayout" label="招标编号">
					<a-input :disabled="disabled" v-decorator="[ 'tendNo', { rules: [ {required: true, message: '招标编号不能为空！',}]}]" placeholder='请输入招标编号'   />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标标题">
					<a-input :disabled="disabled" v-decorator="[ 'tendTitle', { rules: [ {required: true, message: '招标标题不能为空！',}]}]" placeholder='请输入招标标题' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标方式">
					<a-select :disabled="disabled" style="width:280px" placeholder='请选择招标运输类型' v-decorator="[ 'transCode', { rules: [ {required: true, message: '请选择招标方式！',}]}]" >
						<a-select-option v-for="(item,index) in zbTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="出发地" >
					<a-input :disabled="disabled" readOnly style="width:240px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '出发地不能为空!' }]}]" placeholder='请选择出发地' ref="userNameInput" >
						<a-icon type="environment" slot="suffix" style="color: #15837A;" />
					</a-input>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="到达地">
					<a-input :disabled="disabled" readOnly style="width:240px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '到达地不能为空!' }]}]" placeholder='请选择到达地' >
						<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
					</a-input>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标运输类型">
					<a-select :disabled="disabled" style="width:280px" placeholder='请选择招标运输类型' v-decorator="[ 'transType', { rules: [ {required: true, message: '招标运输类型不能为空！',}]}]" >
						<a-select-option v-for="(item,index) in zhaobiaoTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标时间">
					<a-range-picker :disabled="disabled" v-decorator="[ 'tenderingTime', { rules: [ {required: true, message: '招标时间不能为空！',}]}]" readOnly />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="投标时间">
					<a-range-picker :disabled="disabled" v-decorator="[ 'bidTime', { rules: [ {required: true, message: '投标时间不能为空！',}]}]"  readOnly/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标金额">
					<a-input-number :min="0.01" :precision='2' size="large" style="width: 280px;"  :disabled="disabled" v-decorator="[ 'tendPrice', { rules: [ {required: true, message: '招标金额不能为空！',}]}]" placeholder='请输入招标金额' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="资金来源">
					<a-select :disabled="disabled" style="width:280px" placeholder='请选择资金来源' v-decorator="[ 'capitalSource', { rules: [ {required: true, message: '资金来源不能为空！',}]}]" >
						<a-select-option v-for="(item,index) in zijingTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="联系人">
					<a-input  :disabled="disabled" v-decorator="[ 'linkMan', { rules: [ {required: true, message: '联系人不能为空！',}]}]" placeholder='请输入联系人' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="联系方式">
					<a-input  :disabled="disabled" v-decorator="[ 'linkMobile', { rules: [ {required: true, message: '联系方式不能为空！',},{ validator: checkMobile }]}]" placeholder='请输入联系方式' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="QQ">
					<a-input  maxlength="12" onkeyup="this.value=this.value.replace(/\D/g,'')" :disabled="disabled" v-decorator="[ 'linkQq']" placeholder='请输入QQ' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="邮箱">
					<a-input  :disabled="disabled" v-decorator="[ 'linkEmail',{rules: [{ validator: checkMail }]}]"  placeholder='请输入邮箱'/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="传真">
					<a-input maxlength="11"  onkeyup="this.value=this.value.replace(/[^0-9-]+/,'')"  :disabled="disabled" v-decorator="[ 'linkFax']"  placeholder='请输入传真'/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="招标说明">
					<a-textarea  :disabled="disabled" :autosize="{ minRows: 4, maxRows: 6 }" v-decorator="[ 'tendContent', { rules: [ {required: true, message: '招标说明不能为空！',}]}]"   placeholder='请输入招标说明'/>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="上传附件">
					<a-upload  :disabled="disabled" :action="uploadUrl"   v-decorator="[ 'uploadFile']" :fileList="fileList" @change="handleChange">
						<a-button v-if="type!='find'">
							<a-icon type="upload" /> 上传
						</a-button>
					</a-upload>
				</a-form-item>
				<a-divider class="title-divider" />
				<div class="ant-row ant-form-item" v-if='!isSee'>
					<div class="ant-col-4 ant-form-item-label"></div>
					<div class="ant-col-20 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<!--<a-checkbox v-model="agreement" >
									我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
								</a-checkbox>-->
								<a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" label="协议" class="wy-agreement"  >
									<a-checkbox v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
										我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
									</a-checkbox>
								</a-form-item>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item" v-if='!isSee'>
					<div class="ant-col-4 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
							<a-button type="primary"  html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								立即发布
							</a-button>
						</span>
						</div>
					</div>
				</div>
			</a-form>
		</div>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	import moment from 'moment'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	import 'moment/locale/zh-cn';
	moment.locale('zh-cn')
	export default {
		props:['datail','type','isSee'],
		
		data() {
			return {
				loading:false,
				but_loading:false,
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址
				agreement:false,
				disabled:false,
				webShow:false,
				userShow:false,
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				fileList: [],
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 20
						},
					},
				},
				zhaobiaoTypeList: [],
				zijingTypeList: [],
				zbTypeList: [],
				// 附件数组
				imgArray: []
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
				console.log(this.datail)
				if(this.isSee){
					this.disabled = true;
				}else{
					this.disabled = false;
				}
			if(this.datail){
				console.log(this.datail)
				let datail = this.datail
				setTimeout(()=>{
					this.form.setFieldsValue({
						capitalSource:datail.capitalSource,
						fromCity:datail.beginPlace,
						linkEmail:datail.linkEmail,
						linkMan:datail.linkMan,
						linkMobile:datail.linkMobile,
						linkQq:datail.linkQq,
						tendContent:datail.tendContent,
						tendNo:datail.tendNo,
						linkFax:datail.linkFax,
						tenderingTime:[moment(datail.signStartTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.signEndTime,'YYYY-MM-DD HH:mm:ss')],
						bidTime:[moment(datail.startTime,'YYYY-MM-DD HH:mm:ss'),moment(datail.endTime,'YYYY-MM-DD HH:mm:ss')],
						tendPrice:datail.tendPrice,
						tendTitle:datail.tendTitle,
						toCity:datail.endPlace,
						transType:datail.transType,
						transCode:datail.transCode,
					});
		        },0)
				if(datail.filePath){
					let nameArr = datail.fileName.split(',')
					let pathArr = datail.filePath.split(',')
					for (var i = 0;i<nameArr.length;i++){
						this.fileList.push({
							uid: i,
							name: nameArr[i],
							status:'done',
							url: pathArr[i]
						})
					}
				}
			}
			// 招标运输类型
			this.getCommonDict('zhaobiaoTypeList',31);
			// 资金来源
			this.getCommonDict('zijingTypeList',30);
			// 招标方式
			this.getCommonDict('zbTypeList',34);
		},
		components: {
			MapSvg,
			Web,
			User
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 关闭协议弹窗
			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			// 字典表接口 
			getCommonDict (nameList,type) {
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this[nameList] = r.data.data.rows;
				}).catch((e) => {
				})
			},
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			close(){
				this.webShow=false;
				this.userShow=false;
			},
			// 附件
			handleChange(info) {
				this.fileList = info.fileList
				if(info.file.status === 'uploading') {
					return
				}
				let arr = []
				if(info.file.status === 'done') {
					this.loading = false
					// 每个货物的多个图片拼成字符串，按,分割
					let urls = [];
					for (var i=0;i<info.fileList.length;i++){
						arr.push({
							name: info.fileList[i].name,
							path: info.fileList[i].url?info.fileList[i].url:info.fileList[i].response.data.certifJpgFile
						})
					}
				}
				this.imgArray = arr;
			},
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
				if(d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if(d.name === 'departureStreet') {
					this.form.setFieldsValue({
						departureStreet: d.address
					});
				}
				if(d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						destinationStreet: d.address
					});
				}
				//				this[d.name] = d.address;
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				console.log(num)
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
			//认证提交
			handleSubmit(e) {
				if(this.but_loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('this.loading:',this.loading,this.type)
						this.but_loading = true;
						if(values.tenderingTime){
							values.signStartTime  =  values.tenderingTime[0].format('YYYY-MM-DD HH:mm:ss')
							values.signEndTime    =  values.tenderingTime[1].format('YYYY-MM-DD HH:mm:ss')
						}
						if(values.bidTime){
							values.startTime  =  values.bidTime[0].format('YYYY-MM-DD HH:mm:ss')
							values.endTime  =  values.bidTime[1].format('YYYY-MM-DD HH:mm:ss')
						}
						if(values.uploadFile){
							// values.filePath = values.uploadFile.file.response.data.certifJpgFile
							let nameArr = []
							let pathArr = []
							for(var i = 0;i<this.imgArray.length;i++) {
								nameArr.push(this.imgArray[i].name)
								pathArr.push(this.imgArray[i].path)
							}
							values.fileName = String(nameArr)
							values.filePath = String(pathArr)
						}
						if (this.type == 'edit') {
							values.approvalStatus = 106;
							values.tendId = this.datail.tendId
							this.$put('info/logisticsTenderee', values,true).then((r) => {
								if(r.status == 200){
									this.$message.success(r.data.message);
									this.form.resetFields();
								}else{
									this.$message.error(r.data.message);
								}
								this.but_loading = false;
							}).catch((e) => {
								this.but_loading = false;
							})
						}else{

							this.$post('info/logisticsTenderee', values,true).then((r) => {
								if(r.status == 200){
									this.$message.success(r.data.message);
									this.form.resetFields();
								}else{
									this.$message.error(r.data.message);
								}
								this.$emit('change')
								this.but_loading = false;
							}).catch((e) => {
								this.but_loading = false;
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.matching-tendering {
		.list_tab {
			margin-top: 10px;
		}
	}
</style>